<script setup>
import {onMounted, onUnmounted, ref} from 'vue';
import screenfull from 'screenfull';

const isFullscreen = ref(false);

const change = () => {
  isFullscreen.value = screenfull.isFullscreen;
};

const toggleFullScreen = () => {
  screenfull.toggle();
};

onMounted(() => {
  screenfull.on('change', change);
});

onUnmounted(() => {
  screenfull.off('change', change);
});
</script>

<template>
  <div class="v-full-screen" @click="toggleFullScreen">
    <font-awesome-icon v-if="isFullscreen" icon="fas fa-compress" size="lg"/>
    <font-awesome-icon v-else icon="fas fa-expand" size="lg"/>
  </div>
</template>

<style scoped>
.v-full-screen {
  cursor: pointer;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.v-full-screen:hover {
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  transition: ease-in-out .3s;
}
</style>